<template>
  <div class="net-qos">
    <div class="vertical-align-flex mb20">
			<div class="field">{{field}}：</div>
			<div class="value">
			  <div :class="['switch', {'switch-off': true}] "></div>
			</div>
		</div>
    <div class="view-table mb20">
      <div class="table-title">
        {{info.title}}:
      </div>
      <table class="table-center">
        <colgroup>
          <col class="w70">
          <col class="w70">
          <col class="w80">
          <col class="w50">
          <col class="w70">
          <col class="w40">
        </colgroup>
        <thead>
          <tr>
            <th v-for="(item, idx) in info.head" :key="idx">{{item}}</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td v-for="n in 4">
              <input type="text" class="input-none bottom-line text-center input-cell" />
             </td>
             <td><span class="add">{{info.operate}}</span></td>
          </tr>
        </tbody>
      </table>
    </div>
    <div class="toolbar flex-row flex-wrap">
      <p class="flex-oneline">{{toolbar.head}}</p>
      <div class="flex-row">
        <label>{{toolbar.label1}}：</label>
        <div>
          <p v-for="(item, idx) in toolbar.ip" :key='idx'>{{item}}</p>
        </div>
      </div>
      <div class="flex-oneline flex-row">
        <label>{{toolbar.label2}}：</label>
        <p>{{toolbar.tip}}</p>
        <span class="add">{{toolbar.close}}</span>
      </div>
    </div>
  </div>
</template>

<script>

  export default {
    data(){
      return {
        field: this.$t('network.qos.field'),
        info: this.$t('network.qos.info'),
        toolbar: this.$t('network.qos.toolbar'),
      }
    },
    created() {
      this.$bus.emit('changeTab', 6)
    },
  }
</script>

<style lang="scss" scoped>

</style>
